<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .flex-container {
      width: 600px;
      height: 100px;
      background-color: skyblue;
      /* 弹性布局 */
      display: flex;
      align-items: center;
    }
    .flex-item {
      width: 50px;
      line-height: 50px;
      font-size: 30px;
      color: #fff;
      text-align: center;
    }
    .flex-item:nth-child(1) {
      background-color: tomato;
      width: 100px;
      /* 剩余空间前，元素的大小 */
      flex-basis: 200px;
      flex-grow: 1;
    }
    .flex-item:nth-child(2) {
      background-color: khaki;
      width: 200px;
      flex-grow: 2;
    }
    .flex-item:nth-child(3) {
      background-color: pink;
      width: 100px;
      flex-grow: 3;
    }
    /*
          剩余宽=600-（200+200+100）=100
          项目1放大后宽=200+ 1/6*100=216.7
          项目2放大后宽=200+ 2/6*100=233.3
          项目3放大后宽=100+ 3/6*100=150
      */
  </style>
<body>
    <!-- 
        TIP

        flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）(也就是 flex 项目的起始宽或高。)
        浏览器根据这个属性，计算主轴是否有多余空间。
        它的默认值为auto，即项目的本来大小(如果width:200px，则缩放以200px为参考)

        flex-basis的优先级要高于width（如果同时设置 width 和 flex-basis ，则元素宽以 flex-basis 值为主）
    -->

    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
      </div>
</body>
</html>